<script lang="ts">
import { computed, defineComponent } from "vue";

import * as icons from "lucide-vue-next";

export default defineComponent({
  name: "LucideIcon",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 16,
    },
    color: {
      type: String,
      default: "currentColor",
    },
    strokeWidth: {
      type: Number,
      default: 2,
    },
    defaultClass: {
      type: String,
      default: "lucide-icon",
    },
  },
  setup(props) {
    const icon = computed(() => (icons as any)[props.name]);

    return { icon };
  },
});
</script>

<template>
  <component :is="icon" v-bind="$props" />
</template>
